<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="handleSubmit"> 提交修改 </el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form :model="device">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="device.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="位置" :label-width="formLabelWidth">
              <el-input v-model="device.position" autocomplete="off" />
            </el-form-item>
            <el-form-item label="SN" :label-width="formLabelWidth">
              <el-input v-model="device.sn" autocomplete="off" />
            </el-form-item>
            <el-form-item label="订阅" :label-width="formLabelWidth">
              <el-input v-model="device.sub" autocomplete="off" />
            </el-form-item>
            <el-form-item label="推送" :label-width="formLabelWidth">
              <el-input v-model="device.pub" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" :label-width="formLabelWidth">
              <el-input v-model="device.model" autocomplete="off" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>命令交互设置</span>
          </div>
          <div>
            <el-form :model="value">
              <el-form-item label="是否有人" :label-width="formLabelWidth">
                <el-input v-model="value.people" autocomplete="off" />
              </el-form-item>
              <el-form-item label="获取是否有人" :label-width="formLabelWidth">
                <el-input v-model="value.code_get_people" autocomplete="off" />
              </el-form-item>
              <el-form-item label="获取版本" :label-width="formLabelWidth">
                <el-input v-model="value.code_get_version" autocomplete="off" />
              </el-form-item>
              <el-form-item label="获取配置" :label-width="formLabelWidth">
                <el-input v-model="value.code_get_config" autocomplete="off" />
              </el-form-item>
              <el-form-item label="设置配置" :label-width="formLabelWidth">
                <el-input v-model="value.code_set_config" autocomplete="off" />
              </el-form-item>
              <el-form-item label="固件升级" :label-width="formLabelWidth">
                <el-input v-model="value.code_set_update" autocomplete="off" />
              </el-form-item>
              <el-form-item label="设备重启" :label-width="formLabelWidth">
                <el-input v-model="value.code_set_reboot" autocomplete="off" />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import { editDevice } from '@/api/device'

export default {
  name: 'RG601',
  components: { },
  data() {
    return {
      formLabelWidth: '100px',
      device: null,
      value: {
        people: 0,
        code_get_people: 0,
        code_get_version: 0,
        code_get_config: 0,
        code_set_config: 0,
        code_set_update: 0,
        code_set_reboot: 0
      }
    }
  },
  created() {
    this.device = this.$route.query
    this.value = this.device.value
  },
  methods: {
    handleSubmit() {
      this.device.value = JSON.stringify(this.value)
      console.log(this.device)
      editDevice(this.device).then(response => {
        if (response.code === 20000) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/device' })
        } else this.$message(response.message)
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
    margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
